<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #app{
            position: relative;
        }
        table{
            margin: 50px auto;
            border: 2px solid #ddd;
            border-collapse: collapse;
        }
        td,th{
            border: 2px solid #ddd;
            padding: 20px;
            text-align: center;
        }
        th{
            background: #eee;
        }
        .search{
            width: 100%;
            height: 40px;
            text-align: center;
        }
        .search input,
        .search button{
            height: 40px;
            line-height: 40px;
            margin-top: 30px;
        }
        .search button{
            height: 43px;
            width: 60px;
        }
        .pages{
            margin: 0 auto;
            width: 480px;
        }
        .pages select,
        .pages a{
            margin-left: 30px;
        }
        .pages a{
            text-decoration: none;
        }
        .addEmp{
            position: absolute;
            right: 160px;
            top: 40px;
        }
        .addEmp #addUser{
            width: 90px;
            height: 35px;
        }
        table tbody img{

            height: 40px;
            width: auto;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="search">
        <form action="/userInfo" method="post">
            <input type="text" name="username" placeholder="请输入要查找的姓名" id="key" >
            <input type="submit" value="查找" style="width: 50px;">
            <input type="hidden" value="${users.pageSize}">
        </form>
    </div>
<#--    <div class="addEmp">-->
<#--        <button id="addUser">添加用户</button>-->
<#--    </div>-->
    <table id="table">
        <tr>
            <th>用户编号</th>
            <th>用户名</th>
            <th>用户密码</th>
            <th>用户角色</th>
            <th>操作</th>
<#--            <th>-->
<#--                <input type="checkbox" id="cheall">全选-->
<#--                <input type="button" id="delAll" onclick="del()" value="删除选中">-->
<#--            </th>-->
        </tr>
        <tbody id="tbody">
        <#list users.list as user>
            <tr>
                <td>${user.id}</td>
                <td>${user.username}</td>
                <td>${user.password}</td>
                <td>${user.role.rolename}</td>
                <td><a href="/deleteUser?id=${user.id}">删除</a></td>
            </tr>

        </#list>
        </tbody>
    </table>
    <div class="pages">
        <select id="pageSize" onchange="updatePageSize()">
            <option value="5" <#if users.pageSize == 5>selected</#if>>每页5条</option>
            <option value="6" <#if users.pageSize == 6>selected</#if>>每页6条</option>
            <option value="7" <#if users.pageSize == 7>selected</#if>>每页7条</option>
        </select>
        <a href="/userInfo?currentPage=1&pageSize=${users.pageSize}" id="first" class="page">首页</a>
        <a href="/userInfo?currentPage=${users.pageNum-1}&pageSize=${users.pageSize}" id="up" class="page">上一页</a>
        <a href="/userInfo?currentPage=${users.pageNum+1}&pageSize=${users.pageSize}" id="next" class="page">下一页</a>
        <a href="/userInfo?currentPage=${users.pages}&pageSize=${users.pageSize}" id="last" class="page">最后一页</a>
    </div>
</div>
</body>
<script>
    function updatePageSize() {
        let pageSize = document.getElementById("pageSize").value;
        window.location.href = "/userInfo?currentPage=${users.pageNum}&pageSize="+pageSize;
    }
    function search(){
        $.ajax({
            type:"post",
            url:"/userInfo",
            data:{
                username:$("#key").val(),
                pageSize:${users.pageSize}
            }
        })
    }
</script>
</html>
